<!-- <template>
    <p>Hello</p>
</template> -->
  <template>
    <div class="HP-advice">
          <h3 class="head">平台建议</h3>
          <ul class="advice-list">
              <li v-for="(item,index) in advices" :key="index">
                  {{ item }}
              </li>
          </ul>
</div>
</template>

<script setup>
import {ref} from 'vue';

const advices=ref(
  [
  "提供个性化学习路径和推荐内容，根据学生的兴趣、学习历史和能力水平定制课程内容。这可以通过机器学习算法和个人化推荐系统来实现，以提高学生的参与度和学习效果。",
  "增加课程讨论区、在线论坛、学习小组等功能，促进学生之间的交流和互动。社交功能可以帮助学生建立联系，分享学习经验，并解决彼此的问题，从而提高学习氛围和效果。",
  "提供实时的学习进度跟踪和个性化反馈，让学生了解自己的学习情况并及时调整学习策略。同时，建立有效的评估机制，包括作业、测验和项目，以帮助学生检验自己的学习成果，并提供指导和改进建议。",
  "除了视频课程外，还可以提供书籍、文章、案例研究、实验室实践等多样化的教学资源，满足不同学习者的需求和学习风格。这样可以增加课程的趣味性和深度，提高学生的学习动力和效果。",
  "定期更新课程内容和教学资源，跟踪行业发展和学科前沿，确保课程内容的时效性和质量。同时，收集学生反馈和建议，不断优化平台的用户体验和功能，提高用户满意度和忠诚度。"
]
)



</script>

<style scoped>
.advice-list {
  max-height: 40vh; /* 设置最大高度 */
  overflow-y: auto; /* 启用垂直滚动条 */
}

.HP-advice ul {
  padding-left: 20px;
  padding-right: 20px;
  text-align: start;
}

.HP-advice li {
  text-align: left;
  line-height: 1.8;
  font-size: 16px;
  color: #333;
  font-family: "Georgia", "Times New Roman", Times, serif;
  margin-bottom: 5px;
}

.HP-advice li:before {
  content: "•";
  color: #409eff;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}
</style>